<template>
  <a-space direction="vertical" fill size="large">
    <div></div>
    <a-row justify="space-around">
      <a-col :span="23">
        <div class="content">
          <div class="tools">
            <a-row>
              <a-col :span="21"></a-col>
              <a-col :span="2" class="tool" style="justify-content: flex-end;">
                <a-button type="primary" style="width: 4vw;border-radius: 25px;height: 4vh;" @click="openNewConfigDialog">
                  <template #icon>
                    <icon-plus size="24" />
                  </template>
                </a-button>
              </a-col>
            </a-row>
          </div>
          <div class="table">

            <a-table :columns="columns" :data="data" :pagination="false" :bordered="false" row-key="uid">
              <template #action="{ rowIndex }">
                {{ rowIndex }}
                <a-button type="dashed" status="warning" shape="round">
                  <template #icon>
                    <icon-edit />
                  </template>
                  <template #default>
                    Edit
                  </template>
                </a-button>
              </template>
            </a-table>
          </div>
          <div class="tableBottom">
            <a-pagination :total="queryPage.total" :current="queryPage.page" show-total show-page-size
              @change="updatePageData" @page-size-change="changePageSize" />
          </div>
        </div>
      </a-col>
    </a-row>
  </a-space>
  <a-modal v-model:visible="newConfigDialogVisible" @ok="submitNewConfig" @cancel="cancelNewConfig">
    <template #title>
      创建新的配置
    </template>
    <div>
      <a-form :model="newConfig" layout="vertical">
        <a-form-item field="Name" tooltip="物品名称" label="物品名称">
          <a-input v-model="newConfig.Name" placeholder="输入物品名称..." />
        </a-form-item>
        <a-form-item field="Model" label="规格" tooltip="物品规格型号">
          <a-input v-model="newConfig.Model" placeholder="输入物品规格型号..." />
        </a-form-item>
        <a-form-item field="Unit" label="单位" tooltip="物品计量单位">
          <a-input v-model="newConfig.Unit" placeholder="输入物品计量单位..." />
        </a-form-item>
        <a-form-item field="Type" label="类别" tooltip="物品所属分类">
          <a-input v-model="newConfig.Type" placeholder="输入物品所属类别..." />
        </a-form-item>
        <a-form-item field="Type" label="期初数量" tooltip="已有且未录入新物品数量，默认为0">
          <a-input-number :min="0" v-model="newConfig.StartNumber" placeholder="输入物品期初数量..." />
        </a-form-item>
        <a-form-item field="Type" label="安全库存阈值" tooltip="库存少于该值时进行状态提示。">
          <a-input-number :min="0" v-model="newConfig.SafeNumber" placeholder="安全库存阈值..." />
        </a-form-item>
        <a-form-item field="Description" label="备注" tooltip="物品备注">
          <a-input v-model="newConfig.Description" placeholder="输入物品备注..." />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { post } from "@/service/baseService.js"
import { Notification } from '@arco-design/web-vue';

const newConfigDialogVisible = ref(false)
const queryPage = reactive({
  page: 1,
  page_size: 10,
  total: 50,
  start: 1,
  end: 11
})
const newConfig = reactive({
  Name: "",
  Unit: "",
  Type: "",
  Model: "",
  StartNumber: 0,
  SafeNumber: 20,
  Description: ""
})
const columns = [
  {
    title: '物品名称',
    dataIndex: 'name',
    align: 'center',
  },
  {
    title: '规格',
    dataIndex: 'model',
    align: 'center',
  },
  {
    title: '期初数量',
    dataIndex: 'start_number',
    align: 'center'
  },
  {
    title: '单位',
    dataIndex: 'unit',
    align: 'center',
  },
  {
    title: '类别',
    dataIndex: 'type',
    align: 'center',
  },

  {
    title: '预警数量',
    dataIndex: 'safe_number',
    align: 'center'
  },
  {
    title: '添加时间',
    dataIndex: 'date',
    align: 'center',
    width: 200
  },
  {
    title: '备注',
    dataIndex: 'description',
    ellipsis: true,
    tooltip: true
  },
  // {
  //   title: '操作',
  //   slotName: 'action',
  //   align: 'center'
  // },
];
var data = reactive([]);
function openNewConfigDialog() {
  newConfigDialogVisible.value = true
}
function submitNewConfig() {
  addGoodsConfig()
  newConfigDialogVisible.value = false

}
function cancelNewConfig() {
  newConfigDialogVisible.value = false
}
function cacularQuery() {
  queryPage.start = ((queryPage.page - 1) * queryPage.page_size) + 1
  queryPage.end = queryPage.start + queryPage.page_size
  initPageData()
}
function updatePageData(page) {
  queryPage.page = page
  cacularQuery()
}
function changePageSize(size) {
  queryPage.page_size = size
  cacularQuery()
}
function initPageData() {
  post("manage/goods/config/page", queryPage).then((res) => {
    if (res.data.code == 200) {
      queryPage.total = res.data.data.total
      queryPage.start = res.data.data.start
      queryPage.page = res.data.data.page
      queryPage.page_size = res.data.data.page_size
      data = res.data.data.list
    } else {
      Notification.error({
        title: '提示',
        content: res.data.message,
      })
    }
  }).catch((res) => {
    // console.log(res);
    Notification.error({
      title: '错误提示',
      content: "网络或服务器异常！",
    })
  })
}
initPageData()
function addGoodsConfig() {
  post("manage/add/goods/config", newConfig).then((res) => {
    if (res.data.code == 200) {
      Notification.success({
        title: '提示',
        content: res.data.message,
      })
      initPageData()
    } else {
      Notification.error({
        title: '添加失败',
        content: res.data.message,
      })
    }

  }).catch((res) => {
    Notification.error({
      title: '错误提示',
      content: "网络或服务器异常！",
    })
  })
}
</script>
<style scoped>
.content {
  height: 85vh;
  border-radius: 10px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.table {
  height: 78vh;
  width: 100%;
  /* background-color: blueviolet; */

}

.tools {
  height: 8vh;
  width: 100%;
  /* background-color: aquamarine; */
}

.tableBottom {
  height: 7vh;
  width: 98%;
  /* background-color: antiquewhite; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tool {
  height: 8vh;
  display: flex;
  /* flex-direction: row; */
  justify-content: flex-start;
  align-items: center;
}
</style>